<template>
  <div class="profile-page">
    <div class="user-info">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profile.image" class="user-img" />
            <h4>{{ profile.username }}</h4>
            <p>{{ profile.bio }}</p>
            <button
              class="btn btn-sm btn-outline-secondary"
              :class="{active: profile.following}"
              :disabled="profile.followDisabled"
              @click="onFollow"
            >
              <i class="ion-plus-round"></i>
              &nbsp;
              {{ profile.following ? 'Unfaollow':'Follow' }} {{ profile.username }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <nuxt-link
                  class="nav-link"
                  :class="{active:tab === 'my_article'}"
                  :to="{
                  path: $route.path,
                  query: {
                    ...$route.query,
                    tab:'my_article'
                  }
                  }"
                >My Articles</nuxt-link>
              </li>
              <li class="nav-item">
                <nuxt-link
                  class="nav-link"
                  :class="{active:tab === 'fa_article'}"
                  :to="{
                  path: $route.path,
                  query: {
                    ...$route.query,
                    tab:'fa_article'
                  }
                  }"
                >Favorited Articles</nuxt-link>
              </li>
            </ul>
          </div>
          <!-- 文章列表 -->
          <article-list :articles="articles" />
          <!-- 分页列表 -->
          <page-list
            :totalPage="totalPage"
            :page="page"
            routerName="home"
            v-show="totalPage>limit"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleList from "@/components/article-list";
import PageList from "@/components/page-list";
import { getProfiles } from "@/api/profile";
import { getArticles } from "@/api/article";
import { addFollow, deleteFollow } from "@/api/article";
export default {
  middleware: "authenticated",
  name: "Profile",
  components: {
    ArticleList,
    PageList,
  },
  async asyncData({ params, query }) {
    const { tab = "my_article" } = query; //tab 区别feed
    const page = Number.parseInt(query.page || 1);
    const limit = 10;
    let offset = (page - 1) * limit;
    let param = {
      limit,
      offset
    };
    let getArticle =
      tab == "fa_article"
        ? getArticles({ ...param, favorited: params.username })
        : getArticles({ ...param, author: params.username });
    let [{ data }, { data: articleRes }] = await Promise.all([
      getProfiles(params.username),
      getArticle,
    ]);
    return {
      tab,
      page,
      limit,
      offset,
      profile: data.profile,
      articles: articleRes.articles,
      articlesCount:articleRes.articlesCount
    };
  },
  computed: {
    totalPage() {
      return Math.ceil(this.articlesCount / this.limit);
    },
  },
  methods: {
    async onFollow() {
      let profile = this.profile;
      profile.followDisabled = true;
      if (profile.following) {
        //取消点赞
        await deleteFollow(profile.username);
        profile.following = false;
      } else {
        //添加点赞
        await addFollow(profile.username);
        profile.following = true;
      }
      profile.followDisabled = false;
    },
  },
  watchQuery: ["page", "tab"],
};
</script>